<template>
  <div class="home">
    <n-card title="欢迎使用">
      <n-space vertical>
        <n-statistic label="系统运行时间" :value="uptime" />
        <n-grid :cols="4" :x-gap="12">
          <n-grid-item>
            <n-card>
              <n-statistic label="用户总数" :value="1234" />
            </n-card>
          </n-grid-item>
          <n-grid-item>
            <n-card>
              <n-statistic label="今日访问" :value="567" />
            </n-card>
          </n-grid-item>
          <n-grid-item>
            <n-card>
              <n-statistic label="系统消息" :value="89" />
            </n-card>
          </n-grid-item>
          <n-grid-item>
            <n-card>
              <n-statistic label="待办事项" :value="12" />
            </n-card>
          </n-grid-item>
        </n-grid>
      </n-space>
    </n-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const uptime = ref('365天12小时34分')
</script>

<style scoped>
.home {
  padding: 20px;
}
</style>
